<template>
     <el-drawer v-model="table" title="添加菜单" direction="rtl"
     size="50%" v-on:close="Load()">
     <el-form :model="form" label-width="120px">
          <el-form-item label="菜单类型">
               <el-select v-model="type" placeholder="please select your zone">
                 <el-option label="一级菜单" value="0" />
                 <el-option label="二级菜单" value="1" />
               </el-select>
             </el-form-item>
             <el-form-item label="菜单名字">
               <el-input v-model="name" />
             </el-form-item>
          <el-form-item label="跳转">
               <el-input v-model="to" />
             </el-form-item>
             <el-form-item label="是否成为Api菜单">
              <el-select v-model="api" placeholder="是否成为">
                   <el-option label="否" value="0" />
                   <el-option label="是" value="1" />
              </el-select>
         </el-form-item>
         <el-button type="success" @click="Add()">添加</el-button>
         </el-form>
     
     </el-drawer>
 </template>
 <script setup lang="ts">    
 import {ref} from 'vue'
 import { Load } from '/src/style.js'
 import {AddMenu} from '../../../service/Menu'
 
 const form = ref()
 const to = ref()
//  默认一级菜单
 const type = ref('0')
 const name = ref()
 const api = ref('0')
 const props = defineProps({
     data: Object,
   })
 const table = props

 const Add = () =>{
    const data = {type:type.value,to:to.value,name:name.value,api:api.value}
    AddMenu(data)
}
 </script>
 <style></style>